<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0047)./Article_Vote.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>
        榆林科技馆内容页
    </title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <script type="text/javascript" src="./css/adddate.js"></script>
    <script src="../js/vue2.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        /*  外部容器样式*/
        .container{
            width: 100px;
            height: 10px;
            border: 1px solid lightgray;
            border-radius: 15px;
            display: none;
        }
        /* 内部加载部分样式 */
        #content{
            height: 10px;
            border-radius: 15px;
            background-color: skyblue;
            text-align: center;
            line-height: 30px;
            display: none;
        }
    </style>
</head>
<body>
<form name="form1" method="post" action="./Article_Vote.html" id="form1">


    <script type="text/javascript">
        //<![CDATA[
        var theForm = document.forms['form1'];
        if (!theForm) {
            theForm = document.form1;
        }

        function __doPostBack(eventTarget, eventArgument) {
            if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
                theForm.__EVENTTARGET.value = eventTarget;
                theForm.__EVENTARGUMENT.value = eventArgument;
                theForm.submit();
            }
        }

        //]]>
    </script>


    <!--条件检索-->
    <div class="main_box" id="maxBox">
        <div class="side_here">
            <p>
                <a href="./Article_Vote.html#" title="首页"></a>当前位置 &gt; <span>系统设置</span> &gt; <span>
                    数据备份</span></p>
        </div>
        <div class="kong">
        </div>
        <!--公用位置导航结束-->
        <div class="cont_box">
            <p class="title_bt">
                数据库安全操作</p>
            <table class="table_list1" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td align="center" style="margin-left:20px;">
                            <input type="button" name="BtnArticle_Vote" value="备份数据库" id="btck"
                                    onclick="backup(this)" class="btn_d btn-secondary radius">
                        <div class="container" id="contentbox">
                            <div id="content"></div>
                        </div>
                        <span style="color: #f00">特别提醒: 备份的数据库在AccData文件夹下，为保证数据安全，请定时备份数据库。</span>
                        <span id="Label1"></span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--表格选项-->
        <div class="cont_box">
            <p class="title_bt">
                备份记录</p>
            <table width="1060" border="0" cellpadding="0" cellspacing="0" class="table_list2">
                <tbody>
                <tr>
                    <th width="4%">
                        编号
                    </th>
                    <th width="15%">
                        备份人
                    </th>
                    <th width="27%">
                        备份时间
                    </th>
                    <th width="25%">
                        备份路径
                    </th>
                    <th width="15%">
                        备份IP
                    </th>
                    <th width="8%">
                        操作
                    </th>
                </tr>

                <tr v-for="i in infos">
                    <td>
                        {{i.bid}}
                    </td>
                    <td>
                        {{i.bkName}}
                    </td>
                    <td>
                        {{i.bkDate}}
                    </td>
                    <td>
                        {{i.bkPath}}
                    </td>
                    <td>
                        {{i.bkAddress}}
                    </td>
                    <td>
                        <button type="button" name="Repeater1$ctl00$btndel" :value="i.bid"
                               @click="deleteBk(i.bid,i.bkFile,i.bkPath)" id="Repeater1_ctl00_btndel"
                                class="btn btn_an btn_del" title="删除"></button>
                    </td>
                </tr>



                </tbody>
            </table>
            <!--页码开始-->
            <div class="pages" style="margin-top: 40px;">
                <ul class="yema">
                    <li style="border-left: none;">
                        <a id="Lbthead" class="pagebtn"
                           href="javascript:__doPostBack('Lbthead','')">首页</a></li>
                    <li>
                        <a id="Lbtpre" class="pagebtn"
                           href="javascript:__doPostBack('Lbtpre','')">上一页</a></li>
                    <li>
                        <a id="Lbtnext" class="pagebtn"
                           href="javascript:__doPostBack('Lbtnext','')">下一页</a></li>
                    <li>
                        <a id="Lbtend" class="pagebtn"
                           href="javascript:__doPostBack('Lbtend','')">尾页</a></li>
                    <div class="clear">
                    </div>
                </ul>
                <div class="searchPage">
                    <span class="page-sum">共<strong class="allPage">&nbsp;1
                    </strong>页</span><span class="page-sum">第<strong class="allPage">&nbsp;1
                    </strong>页</span> <span class="page-go">跳转第
                        <input name="Txtpageno" type="text" id="Txtpageno" class="pagebtn" size="3"
                               onkeyup="this.value=this.value.replace(/[^\d\.]/g, '')"
                               style="ime-mode: disabled">页</span>
                    <a id="BtngoPage" class="page-btn"
                       href="javascript:__doPostBack('BtngoPage','')">GO</a>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </div>

    <!--页码结束-->
    <!--按钮元素-->
</form>

</body>
<script>
    bk=new Vue({
        el : "#maxBox",
        data : {
            infos :[],
        },
        methods : {
            deleteBk:function (aid,bkFile,apath) {

                let params = new URLSearchParams();

                params.append("bid",aid);
                params.append("bkFile",bkFile);
                params.append("path",apath);
                let b = window.confirm("是否确认删除");
                if (b) {
                    axios.post("../backupServlet?action=deleteBackup", params).then(res => {
                        if (res.data == "success") {

                            for (var i = 0; i < bk.infos.length; i++) {
                                if (bk.infos[i].bid == aid) {
                                    bk.infos.splice(i, 1);
                                    break
                                }
                            }
                        }
                    })
                }

            }
        }
    });
    window.onload=init;
    function init() {
        axios.get("../backupServlet?action=findAll").then(res=>{
            bk.infos=res.data;
            console.log(res);
        })
    }

    function backup(obj)
    {
        obj.disabled=true;
        var st="";
        axios.get("../backupServlet?action=addBackup").then(res=>{
            if (res.data=="success") {
                st+="备份成功"
            }else {
                st="备份失败";
            }
        })
        //获取content节点
        var _content=document.getElementById("content");
        _content.style.display="block";
        contentbox = document.getElementById("contentbox");
        contentbox.style.display="inline-block";
        var num=0; //进度条里边的长度
        //设置计时器（动起来的关键）
        var id = setInterval(function(){
            num++;
            //设置content的宽度（动态变化）
            _content.style.width=`${num}px`;
            //content内文字显示为百分比与宽度对应
            _content.innerText=`${num}%`;
            //当content的宽度与container宽度相同时清除计时器
            if(num==100){
                obj.disabled=false;
                init();
                clearInterval(id);
            }
            //加载到100%时替换content中的文字
            if(_content.innerText=="100%"){
                _content.innerText=st
            }
            //每隔10毫秒变换一次
        },10);

    }
</script>
</html>